<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title of the document</title>
	<script src="./ImagesLoaded_files/jquery-2.1.3.min.js"></script>
	<script src="./ImagesLoaded_files/imagesloaded.pkgd.js"></script>
	<script type="text/javascript">
		$( document ).ready(function() {
	 		

 			$('.container').imagesLoaded()
				  .always( function( instance ) {
				    console.log('all images loaded');
				  })
				  .done( function( instance ) {
				    console.log('all images successfully loaded');
				  })
				  .fail( function() {
				    console.log('all images loaded, at least one is broken');
				  })
				  .progress( function( instance, image ) {
				    var result = image.isLoaded ? 'loaded' : 'broken';
				    console.log( 'image is ' + result + ' for ' + image.img.src );
				  });

	 	});

	</script>

</head>

<body>
	   <img src="http://lorempixel.com/600/400/people/"   alt=""  class='container'/>
       <img src="http://lorempixel.com/600/200/people/"   alt=""  class='container'/>
       <img src="http://lorempixel.com/600/200/city/"   alt=""  class='container'/>
                
</body>

</html>